<!DOCTYPE HTML>
<html>
<head th:replace="mgr/base/head :: head('用户自定义页面管理')"></head>
<body>
	<nav th:replace="mgr/base/nav :: active('tpl-page')"></nav>
	<div id="page-wrapper" style="padding: 10px">
		<div class="container-fluid">
			<div class="row" style="margin-bottom: 10px">
				<div class="col-md-12">
					<a class="btn btn-default" th:href="@{/mgr/template/page/new}"
						role="button">创建新页面</a> <a class="btn btn-default"
						data-toggle="modal" data-target="#queryModal" role="button">查询</a>
				</div>
			</div>
			<div class="row">
				<div class="col-md-12">
					<div class="alert alert-danger" th:unless="${error == null}"
						th:text="${messages.getMessage(error)}"></div>
					<form style="display: none" th:action="@{/mgr/template/page/index}"
						id="pageForm">
						<input type="hidden" th:value="${result.currentPage}"
							name="currentPage" /> <input type="hidden"
							th:value="${result.param.alias}"
							th:if="${result.param.alias != null}" name="alias" /> <input
							type="hidden" th:value="${result.param.name}"
							th:if="${result.param.name != null}" name="name" /> <input
							type="hidden" th:if="${result.param.space != null}"
							name="space.id" th:value="${result.param.space.id}"
							id="pageFormSpaceId" />
					</form>
					<div class="alert alert-info"
						th:if="${#lists.isEmpty(result.datas)}">当前没有任何自定义页面</div>
					<div th:unless="${#lists.isEmpty(result.datas)}">
						<div class="table-responsive">
							<table class="table">
								<thead>
									<tr>
										<th>ID</th>
										<th>页面名</th>
										<th>路径</th>
										<th>空间</th>
										<th>创建日期</th>
										<th>操作</th>
									</tr>
								</thead>
								<tbody>
									<tr th:each="page : ${result.datas}">
										<td th:text="${page.id}"></td>
										<td><a href="###" th:title="${page.name}"
											data-toggle="tooltip"
											th:text="${#strings.length(page.name) > 10  ? #strings.substring(page.name,0,10)+'...' : page.name}"></a></td>
										<td><a href="###" th:if="${page.alias != null}"
											th:text="${page.alias}"></a></td>
										<td><span th:if="${page.space == null && !page.spaceGlobal}" th:text="无"></span>
										<span th:if="${page.space == null && page.spaceGlobal}" th:text="所有空间"></span>
											<a href="###" data-toggle="tooltip"
											th:title="${page.space.name}" th:if="${page.space != null}"
											th:text="${#strings.length(page.space.name) > 10  ? #strings.substring(page.space.name,0,10)+'...' : page.space.name}"></a>
										</td>
										<td
											th:text="${#dates.format(page.createDate, 'yyyy-MM-dd HH:mm')}"></td>
										<td><a href="###" style="margin-right: 10px"
											data-action="remove" th:data-id="${page.id}"><span
												class="glyphicon glyphicon-remove" aria-hidden="true"></span></a>
											<a th:href="@{/mgr/template/page/update?id=}+${page.id}"
											style="margin-right: 10px"><span
												class="glyphicon glyphicon-edit" aria-hidden="true"></span></a>
											<a href="###" data-action="link" style="margin-right: 10px"
											th:data-link="${urls.getUrl(page)}" title="获取页面链接"><span
												class="glyphicon glyphicon-link" aria-hidden="true"></span></a>
											<a href="###" th:data-id="${page.id}"
											style="margin-right: 10px" data-action="save-history"
											title="备份"><span class="glyphicon glyphicon-upload"
												aria-hidden="true"></span></a> <a href="###"
											th:data-id="${page.id}" style="margin-right: 10px"
											data-action="load-history" title="查看历史备份"><span
												class="glyphicon glyphicon-download" aria-hidden="true"></span></a>
										</td>
									</tr>
								</tbody>
							</table>
						</div>
					</div>
					<div th:if="${result.totalPage > 1}">
						<ul class="pagination">
							<li
								th:each="i : ${#numbers.sequence(result.listbegin, result.listend-1)}">
								<a th:text="${i}" th:data-page="${i}" href="###"></a>
							</li>
						</ul>
					</div>
				</div>
			</div>
		</div>
	</div>
	<div th:replace="base/foot_source"></div>
	<script type="text/javascript" th:src="@{/static/js/mgr/common.js}"></script>


	<div class="modal " id="queryModal" tabindex="-1" role="dialog"
		aria-labelledby="queryModalLabel">
		<div class="modal-dialog" role="document">
			<div class="modal-content">
				<div class="modal-header">
					<h4 class="modal-title" id="queryModalLabel">查询</h4>
				</div>
				<div class="modal-body">
					<div class="container-fluid">
						<form>
							<div class="form-group">
								<div class="checkbox">
									<label> <input type="checkbox"
										id="query-space-checkbox"> 查询空间
									</label>
								</div>
								<select class="form-control" id="space" style="display: none">
									<option value="">主空间</option>
									<option th:each="space : ${spaces}" th:value="${space.id}"
										th:text="${space.name}"></option>
								</select>
							</div>
							<div class="form-group">
								<label>名称</label> <input type="text" class="form-control"
									id="query-name" name="name"
									th:attr="value=${result.param.name != null ? result.param.name : null}"
									placeholder="名称">
							</div>
							<div class="form-group">
								<label>路径</label> <input type="text" class="form-control"
									id="query-alias" name="alias"
									th:attr="value=${result.param.alias != null ? result.param.alias : null}"
									placeholder="路径">
							</div>
						</form>
					</div>
				</div>
				<div class="modal-footer">
					<button type="button" class="btn btn-default" data-dismiss="modal">关闭</button>
					<button type="button" class="btn btn-primary" id="query-btn">查询</button>
				</div>
			</div>
		</div>
	</div>
	
	
	<div class="modal " id="historyModal" tabindex="-1" role="dialog"
		aria-labelledby="queryModalLabel">
		<div class="modal-dialog" role="document">
			<div class="modal-content">
				<div class="modal-header">
					<h4 class="modal-title">历史模板</h4>
				</div>
				<div class="modal-body">
					<div class="container-fluid">
						<div id="history-tip"></div>
						<div class="table-responsive" id="historyTableContainer">
							
						</div>
					</div>
				</div>
				<div class="modal-footer">
					<button type="button" class="btn btn-default" data-dismiss="modal">关闭</button>
				</div>
			</div>
		</div>
	</div>

	<script type="text/javascript">
		var historyFlag = false;
		$(document).ready(function(){
			var spaceId = $("#pageFormSpaceId").val();
			if(spaceId != undefined){
				$("#query-space-checkbox").prop("checked",true);
				$("#space").val(spaceId).show();
			}
			$("#query-space-checkbox").click(function(){
				$("#space").toggle();
			})
			$("#query-btn").click(function(){
				var form = "";
				$("#query-form").remove();
				form += '<form id="query-form" style="display:none" action="'+basePath+'/mgr/template/page/index" method="get">';
				var name = $.trim($("#query-name").val());
				var alias = $.trim($("#query-alias").val());
				if(name != ''){
					form += '<input type="hidden" name="name" value="'+name+'"/>';
				}
				if(alias != ''){
					form += '<input type="hidden" name="alias" value="'+alias+'"/>';
				}
				if($("#query-space-checkbox").is(":checked")){
					form += '<input type="hidden" name="space.id" value="'+$("#space").val()+'"/>';
				}
				form += '</form>';
				$("body").append(form);
				$("#query-form").submit();
			})
			$('[data-toggle="tooltip"]').tooltip();
			$("[data-page]").click(function(){
				var page = $(this).attr("data-page");
				$("#pageForm").find("input[name='currentPage']").val(page);
				$("#pageForm").submit();
			});
			$("a[data-action]").click(function(){
				var me = $(this);
				var action = me.attr("data-action");
				switch(action){
				case "remove":
					bootbox.confirm("确定要删除吗？",function(result){
						if(result){
							$.ajax({
		    					type : "post",
		    					url : basePath+"/mgr/template/page/delete",
		    					data : {"id":me.attr("data-id")},
		    					success : function(data){
		    						if(data.success){
		    							window.location.reload()
		    						}else{
			    						bootbox.alert(data.message);
		    						}
		    					},
		    					complete:function(){
		    					}
		    				});
						}
					})
					break;
				case "link":
					var link = me.attr('data-link');
					bootbox.dialog({
						title : '页面访问链接',
			            message: '<a href="'+link+'" target="_blank">'+link+'</a>',
			            buttons: {
			                success: {
			                    label: "确定",
			                    className: "btn-success"
			                }
			            }
					});
					break;
				case "save-history":
					
					bootbox.prompt({
					    title: "备注",
					    inputType: 'textarea',
					    callback: function (result) {
					    	if(result == null){
					    		return ;
					    	}
					    	var id = me.attr("data-id");
							if(!historyFlag){
								historyFlag = true;
								$.ajax({
			    					type : "post",
			    					url : basePath+"/mgr/template/page/"+id+"/saveHistory",
			    					data : {remark:result},
			    					success : function(data){
			    						if(data.success){
			    							bootbox.alert("备份成功");
			    						}else{
				    						bootbox.alert(data.message);
			    						}
			    					},
			    					complete:function(){
			    						historyFlag = false;
			    					}
			    				});
							}
					    }
					});
					break;
				case "load-history":
					var id = me.attr("data-id");
					
					$.get(basePath + '/mgr/template/page/'+id+'/history',{},function(data){
						if(data.success){
							data = data.data;
							if(data.length == 0){
								bootbox.alert("没有历史模板记录");
							} else {
								var html = '<table class="table">';
								html += '<tr><th>备注</th><th>时间</th><th>操作</th></tr>';
								for(var i=0;i<data.length;i++){
									var remark = data[i].remark;
									if(remark.length > 10){
										remark = remark.substring(0,10)+"...";
									}
									html += '<tr><td><a href="###" data-toggle="tooltip" title="'+data[i].remark+'">'+remark+'</a></td><td>'+new Date(data[i].time).format('yyyy-mm-dd HH:MM:ss')+'</td><td><a href="###" data-id="'+data[i].id+'" data-toggle="confirmation"  style="margin-right:10px"><span class="glyphicon glyphicon-remove" aria-hidden="true"></span></a><a href="###" onclick="editHistoryTemplate(\''+data[i].id+'\',$(this))"><span class="glyphicon glyphicon-edit" aria-hidden="true"></span></a></td></tr>';
								}
								html += '</table>';
								$("#historyTableContainer").html(html);
								$('#historyTableContainer [data-toggle="tooltip"]').tooltip();
								$("#history-tip").html('');
								$("#historyModal").modal('show');
								
								$('[data-toggle=confirmation]').confirmation({
									 rootSelector: '#historyTableContainer',
									 onConfirm:function(){
										 var me = $(this);
										 var id = me.attr('data-id');
										 $.post(basePath + '/mgr/template/history/delete',{id:id},function(data){
											if(data.success){
												me.parent().parent().remove();
												$("#history-tip").html('<div class="alert alert-info alert-dismissible"><button type="button" class="close" data-dismiss="alert" aria-label="Close"><span aria-hidden="true">&times;</span></button>删除成功</div>');
											}else{
												$("#history-tip").html('<div class="alert alert-warning alert-dismissible"><button type="button" class="close" data-dismiss="alert" aria-label="Close"><span aria-hidden="true">&times;</span></button>'+data.message+'</div>');
											}
										});
									 }
								});
							}
						}else{
    						bootbox.alert(data.message);
						}
					});
					break;
				}
			})
		});
		
		function editHistoryTemplate(id,o){
			$("#historyTableContainer textarea").parent().parent().remove();
			var tr = o.parent().parent();
			tr.after('<tr><td colspan="3"><textarea class="form-control">'+tr.find('td:first a').attr('data-original-title')+'</textarea><button class="btn btn-primary pull-right" style="margin-top:5px">更新</button></td></tr>');
			var area = $("#historyTableContainer textarea");
			area.next().click(function(){
				$.post(basePath +'/mgr/template/history/update',{id:id,remark:area.val()},function(data){
					if(data.success){
						var template = data.data;
						var remark = template.remark;
						if(remark.length > 10){
							remark = remark.substring(0,10)+"...";
						}
						tr.find('td:first a').text(remark);
						tr.find('td:first a').attr('data-original-title',template.remark);
						area.parent().parent().remove();
						$("#history-tip").html('<div class="alert alert-info alert-dismissible"><button type="button" class="close" data-dismiss="alert" aria-label="Close"><span aria-hidden="true">&times;</span></button>更新成功</div>');
					}else{
						$("#history-tip").html('<div class="alert alert-warning alert-dismissible"><button type="button" class="close" data-dismiss="alert" aria-label="Close"><span aria-hidden="true">&times;</span></button>'+data.message+'</div>');
					}
				});
			})
			
		}
	</script>
</body>
</html>